<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-17 20:08:41
 * @LastEditors: 高月飞
-->
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="headerHand">
                    <HeaderLeftVue :isHomePage="isHomePage" :setHomePage="setHomePage" />
                    <HeaderCenterVue @on-router-list="onRouterList" @onselect-menu="onselectMenu"
                        :setHomePage="setHomePage" />
                    <HeaderRightVue :realname="realname" :userLogout="userLogout" />
                </div>
                <div class="headerBottom">
                    <Breadcrumbs :valueIndexList="valueIndexList" />
                </div>
            </el-header>
            <el-container v-if="isHomePage" class="hiddenAuto">
                <el-aside>
                    <AsidMenuVue :valueIndexListChildren="valueIndexListChildren" :valueIndexListMenu="valueIndexListMenu"
                        :valueIndexListicon="valueIndexListicon" :itemRouter="itemRouter"
                        :valueIndexListRouter="valueIndexListRouter" :valueIndexList="valueIndexList"
                        :textColor="textColor" />
                </el-aside>
                <el-main><router-view /></el-main>
            </el-container>
            <el-container v-else class="home"><router-view /></el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import Breadcrumbs from "./ui/Breadcrumbs/breadcrumbs.vue";
import HeaderCenterVue from "./ui/header/HeaderCenter.vue";
import HeaderLeftVue from "./ui/header/HeaderLeft.vue";
import HeaderRightVue from "./ui/header/HeaderRight.vue";
import AsidMenuVue from "./ui/Aside/asideMenu.vue"
import { computed, reactive, ref } from "vue";
import { deepCopy } from "@/utils/Tools/deepCopy";
import { useRouter } from "vue-router";
import useUserStore from '@/stores/user';

const router = useRouter()
const isHomePage = ref(false)
const valueIndexList = reactive<any>({})
const valueIndexListChildren = ref<string[]>([])
const valueIndexListMenu = ref<string>('')
const valueIndexListicon = ref<string>('')
const valueIndexListRouter = ref<string>('')

const setHomePage = (value: boolean) => {
    isHomePage.value = value;
};
const textColor = ref<string>("red")
const onRouterList = (item: any) => {
    setHomePage(true);
    valueIndexList.value = deepCopy(item)
    valueIndexListMenu.value = valueIndexList.value.meta.menu
    valueIndexListicon.value = valueIndexList.value.meta.icon
    valueIndexListRouter.value = valueIndexList.value.redirect
    // console.log(valueIndexListRouter)
    valueIndexListChildren.value = valueIndexList.value.children.map((child: any) => child);

}
const userStore = useUserStore()
const realname = computed(() => {
    return userStore.userinfo.name
})
const userLogout = () => {
    userStore.SETUSERLOGOUT()
    router.replace("/login")
}

const itemRouter = ref<string>("")
const onselectMenu = (item: string) => {
    itemRouter.value = item
}
router.replace('/dashoard/newData')


</script>

<style lang="scss" scoped>
.el-container {
    background-color: #f0f0f0;
    height: 100vh;
    width: 100%;

    .el-header {
        width: 100%;
        height: 100px;
        background-color: #fff;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        --el-header-padding: 0 0px;

        .headerHand {
            height: 50px;
            background-color: #367eea;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .headerBottom {
            height: 50px;
            margin-left: 20px;
            display: flex;
            justify-content: start;
            align-items: center;
        }

    }

    .el-container {
        height: 100%;
        background-color: #f0f0f0;

        .el-aside {
            width: 180px;
            height: 100%;
            background-color: #fff;
            margin: 0 10px;
            border-radius: 5px;
            box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);


        }

        .el-main {
            --el-main-padding: 0px;
            width: 100%;
            height: 100%;
            padding: 0;
            background-color: #efefef;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


        }
    }
}

.hiddenAuto {
    overflow: auto;
}
</style>